<template>
  <div>
    <delicious @add="addFn" @sub="subFn" :arr="list"></delicious>
  </div>
</template>

<script>
import delicious from "./components/delicious";
export default {
  components: {
    delicious,
  },
  data() {
    return {
      list: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  methods: {
    addFn(ind) {
      this.list[ind].count++;
    },
    subFn(ind) {
      this.list[ind].count > 0 && this.list[ind].count--;
    },
  },
};
</script>

<style>
</style>